<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="lib/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
		<link href="lib/jquery-datatables/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" />
		<style>
			body {
				overflow-x: hidden;
			}
			
			#msgtable_paginate {
				text-align: right;
			}
			
			.unread {
				font-weight: bold;
			}
			
			.nav>li>a {
				padding: 5px 15px;
				cursor: pointer;
			}
			
			.textcenter {
				text-align: center !important;
			}
			
			.table tbody tr td,
			.table thead tr th {
				text-align: center;
				white-space: nowrap;
				border-bottom-width: 1px;
			}
			
			.table thead tr {
				background-color: #f7f7f9;
			}
			
			div.dataTables_wrapper div.dataTables_info {
				cursor: default;
			}
		</style>
	</head>

	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<ul id="menu_type" class="nav nav-pills" style="margin-left: -15px;">
						<li class="active">
							<a id="fn_msg_unread" class="small-nav" data-toggle="tab">未读</a>
						</li>
						<li>
							<a id="fn_msg_read" class="small-nav" data-toggle="tab">已读</a>
						</li>
						<li>
							<a id="fn_msg_all" class="small-nav" data-toggle="tab">全部</a>
						</li>
					</ul>
				</div>
				<table class="table table-striped table-bordered table-hover" id="msgtable" style="margin: 0;"></table>
			</div>
		</div>
	</body>

	<script src="lib/requirejs/require.min.js"></script>
	<script src="js/vw.config.require.js"></script>
	<script>
		//获取站内信信息
		require(['jquery.dataTables', 'jquery.dataTables.bootstrap', 'vw.common'], function() {
			$('#menu_type li').click(function() {
				$(this).addClass('active').siblings().removeClass('active')
			})

			//判断获取未读/已读/全部站内信，-1:全部 0:未读 1:已读
			$("#fn_msg_unread").on('click', function() {
				readmsg(0);
			});
			$("#fn_msg_read").on('click', function() {
				readmsg(1);
			});
			$("#fn_msg_all").on('click', function() {
				readmsg(-1);
			});

			readmsg(0);

			function readmsg(msgtype) {
				//调用接口获取站内信
				vw_common.customAjax({
					type: "post",
					url: VW_INTERFACE.WEBSERVICE.LoginManage("GetNotes"),
					dataType: "json",
					data: {
						"userID": vw_static.getCookie(window.location.host),
						"status": msgtype,
						"start": 0, //页码
						"limit": -1, //条数
					},
				}, function(e) {
					if(e.notes != undefined) {

						//清除原数据
						if($('#msgtable').hasClass('dataTable')) {
							$('#msgtable').unbind();
							$('#msgtable').dataTable().fnClearTable(); //清空table
							$('#msgtable').dataTable().fnDestroy(); //还原初始化了的table
						}

						//填充表头字段名
						var cols = [];
						var colnum = e.notes.column.length;
						for(var i = 0; i < colnum; i++) {
							var col = {};
							col.title = e.notes.column[i];
							col.class = "textcenter";
							cols[i] = col;
						}
						cols[colnum - 1].visible = false;
						//加一列“详情信息”
						col = {};
						col.title = "";
						col.searchable = false;
						cols[colnum] = col;
						cols[colnum].visible = false;
						//加一列“消息ID”
						col = {};
						col.title = "";
						col.searchable = false;
						cols[colnum + 1] = col;
						cols[colnum + 1].visible = false;
						//最后加一列“显示详情”
						col = {};
						col.title = "";
						col.searchable = false;
						cols[colnum + 2] = col;

						cols[0].width = "50%";
						cols[1].width = "13%";
						cols[2].width = "22%";
						cols[3].width = "15%";
						cols[colnum + 2].width = "5%";
						//如果该表有数据则填充数据
						var rows = [];
						for(var i = 0; i < e.notes.data.length; i++) {
							var row = [];
							var length = e.notes.data[i].length;
							for(var j = 0; j < length; j++) { //逐字段赋值
								row[j] = e.notes.data[i][j].value;
							};
							row[length] = e.notes.content[i];
							row[length + 1] = e.notes.id[i];
							rows[i] = row;
						}

						var oTable = $('#msgtable').DataTable({
							"data": rows,
							"columns": cols,
							"columnDefs": [{
								"targets": -1,
								"data": null,
								"defaultContent": "<a href='#' data-toggle='modal' style='cursor: pointer;'><i class='fa fa-envelope-o'></i></a>",
							}],
							"rowCallback": function(row, data, index) {

								$('td', row).addClass('textcenter'); //.attr('style', 'text-align: center;');

								if(data[data.length - 3] == "未读") {
									$('td', row).addClass('unread');
								} else {
									$('td', row).addClass('read');
								}
								var statcol = 2;
								if(data[statcol] == "审核通过") {
									$('td', row).eq(statcol).html("<span class='label label-success'>" + data[statcol] + "</span>");
								} else if(data[statcol] == "审核未通过") {
									$('td', row).eq(statcol).html("<span class='label label-danger'>" + data[statcol] + "</span>");
								} else {
									$('td', row).eq(statcol).html("<span class='label label-info'>" + data[statcol] + "</span>");
								}
							},
							"iDisplayLength": 7,
							"scrollY": "260px",
							"sDom": "<'row'r>t<'row'<'col-md-3 col-xs-3 'i><'col-md-9 col-xs-9'p>>",
							"order": [
								[0, "asc"]
							],
							"oLanguage": {
								"sZeroRecords": "没有您要搜索的内容",
								"sInfo": "从 _START_ 到  _END_ 条，共 _TOTAL_ 条",
								"sInfoEmpty": "记录数为0",
								"oPaginate": {
									"sFirst": "第一页",
									"sPrevious": "上一页",
									"sNext": "下一页",
									"sLast": "最后一页"
								}
							}
						});

						$(".dataTables_scrollBody").css('overflow', 'initial')
						$(".dataTables_scrollHead").css('overflow', 'initial')
						$(".dataTables_scroll").css('overflow', 'auto')
						//点击第一列查看附加信息
						$('#msgtable').on('click', ' tbody a', function() {
							var tr = $(this).closest('tr');
							var row = $('#msgtable').DataTable().row(tr);
							if(row.child.isShown()) {
								row.child.hide();
							} else {
								var d = row.data();
								var id = d[d.length - 1]
								if(d != undefined) {
									row.child(fnDetails(d)).show();
									if($('td', row.node()).hasClass('unread')) {
										$('td', row.node()).removeClass('unread');
										$('td', row.node()).addClass('read');

										vw_common.customAjax({
											url: VW_INTERFACE.WEBSERVICE.LoginManage("CheckNotes"),
											type: 'POST',
											dataType: 'json',
											data: {
												"id": id
											},
										}, function(e) {
											bDialog.msgPopup("info", "消息", "您已阅读本消息");
										});
									}
								}
							}
						});

						//详细信息的内容
						function fnDetails(aData) {
							var out = "<p>";
							out += aData[aData.length - 2];
							out += "</p>";
							return out;
						};
					}
				});
			}
		});
	</script>

</html>